<!--
作者：刘洮君
描述：课程表页面
修改人：刘洮君
-->

<template>
<!-- 主体 -->
  <div class="contentBody">
    <!-- 查询条件 -->
    <div id="search">
      <!-- 项目名称 -->
      <select name="" id="teamNameSelect" value="teamName">
        <option value="teamName" disabled>项目名称</option>
      </select>
      <!-- 日期 -->
      <input type="date" id="dateInupt" />
      <!-- 实训老师 -->
      <select name="" id="PriticalteacherSelect" value="teacher">
        <option value="teacher" disabled>实训老师</option>
      </select>
      <!-- 责任老师 -->
      <select name="" id="dutyteacherSelect" value="teacher">
        <option value="teacher" disabled>责任老师</option>
      </select>
      <!-- 查询按钮 -->
      <el-button type="primary" id="searchbtn">查询</el-button>
    </div>
    <!-- 课程表 -->
    <div id="schedul">
      <!-- 表格 -->
      <table cellspacing="0" cellpadding="0">
        <!-- 表头 -->
        <tr id="tabhead">
          <th id="timeOrdate"></th>
          <th id="weekdate">星期日<br />04/04</th>
          <th id="weekdate">星期一<br />04/05</th>
          <th id="weekdate">星期二<br />04/06</th>
          <th id="weekdate">星期三<br />04/07</th>
          <th id="weekdate">星期四<br />04/08</th>
          <th id="weekdate">星期五<br />04/09</th>
          <th id="weekdate" style="border-radius: 0 5px 5px 0">
            星期六<br />04/10
          </th>
        </tr>
        <!-- 上午表格 -->
        <tr id="tabContentMorning">
          <td id="tabTime">上<br>午</td>
          <td id="sun"></td>
          <td id="mon">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="tues">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="wed">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="thur">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="fri">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="sat"></td>
        </tr>
        <!-- 下午表格 -->
        <tr id="tabContentNoon">
          <td id="tabTime" style="border-radius: 0 0 5px 5px">下<br>午</td>
          <td id="sun"></td>
          <td id="mon">
            <p>软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="tues">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="wed">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="thur">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="fri">
            <p id="name">软件项目管理</p>
            <p>1409</p>
            <p>葛亮</p>
          </td>
          <td id="sat"></td>
        </tr>
      </table>
    </div>
  </div>
  <!-- 分页 -->
  <div class="bodyFoot">
    <div class="demo-pagination-block">
      <el-pagination
        v-model:currentPage="currentPage3"
        v-model:page-size="pageSize3"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next, jumper"
        :total="100"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  

</template>

<script>
// 引入图标
import { CopyDocument, CirclePlus } from "@element-plus/icons-vue";
import { ref } from 'vue'
export default {
  name: "projectTeamView",
  setup() {
    const currentPage3 = ref(5)
    const pageSize3 = ref(10)
    const small = ref(false)
    const background = ref(true)
    const disabled = ref(false)
    const handleSizeChange = (val)=> {
      console.log("sizeChange", val);
      // pageSize3.value = val;
      // this.getMessagesList();
    };
    const handleCurrentChange = (val) =>  {
      console.log("currentChange", val);
      // pageSize3.value = val;
      // this.getMessagesList();
    };
    return {
      CirclePlus,CopyDocument,
      currentPage3,pageSize3,small,background,disabled,
      handleSizeChange,handleCurrentChange,
    };
  },
};
</script>
<style>
.bodyFoot {
    padding-left: 350px;  
  }
</style>

<style lang="less" scoped>
// content内容
.contentBody {
  padding: 20px;
  margin-top: 80px;
  //  查询
  #search {
    width: 100%;
    height: 50px;

    // 项目名称
    #teamNameSelect {
      margin-left: 430px;
      width: 150px;
      height: 40px;
      border: 1px solid rgb(212, 211, 211);
    }
    // 日期
    #dateInupt {
      margin-left: 30px;
      width: 150px;
      height: 38px;
      border: 1px solid rgb(212, 211, 211);
    }
    // 实训老师
    #PriticalteacherSelect {
      margin-left: 30px;
      width: 130px;
      height: 40px;
      border: 1px solid rgb(212, 211, 211);
    }
    #dutyteacherSelect {
      margin-left: 30px;
      width: 130px;
      height: 40px;
      border: 1px solid rgb(212, 211, 211);
    }
    #searchbtn {
      margin-left: 15px;
      width: 85px;
      height: 40px;
      background-color: #3e94ad;
      color: #fff;
    }
  }
  // 课程表
  #schedul {
    width: 1100px;
    height: 400px;
    margin: auto;
    border-radius: 10px;
    display: flex;
    //  padding: 10%;
    background-color: rgb(255, 255, 255);
    box-shadow:3px 3px 10px #3e94ad;
    // 表格
    table {
      width: 100%;
      // 表头
      #tabhead {
        // 日期或时间
        #timeOrdate {
          width: 4%;
          // border: 1px solid black;
          // border-radius: 5px;
          background-color: #c2dae2;
          border-radius: 5px 0 0 0;
        }
        // 星期
        #weekdate {
          width: 12%;
          height: 40px;
          font-size: 12px;
          font-family: "微软雅黑";
          font-weight: normal;
         
          // border: 1px solid #C2DAE2;
          background-color: #c2dae2;
        }
        #weekdate:not(:last-child){
           border-right:1px solid #C6D4DA ;
        }
      }
      // 上午
      #tabContentMorning{
         td{
           border-right: 1px solid #C6D4DA;
         }
         td:nth-child(8){
           border-right: none;
         }
      }
      // 下午
      #tabContentNoon{
        td{
           border-right: 1px solid #C6D4DA;
           border-top: 1px solid #C6D4DA;
         }
         td:nth-child(8){
           border-right: none;
         }
      }
      // 时间-上午或下午
      #tabTime{
          text-align: center;
          background-color: #c2dae2;
        }
      tr p {
        text-align: center;
        font-size: 14px;
      }
    }

  }

  // 分页
  .bodyFoot {
    // text-align: center;
  }
}
</style>